<template>
  <view>
    <view class="head">
      <view class="left">账号登陆</view>
      <view class="right">
        <text>手机号登陆</text>
        <image src="../../static/路径 5@2x (2).png" mode=""></image>
      </view>
    </view>
    <view class="body">
      <view class="number">
        <input type="text" placeholder="请输入账号" v-model="account">
      </view>
      <view class="password">
        <input type="password" placeholder="请输入密码" v-model="password">
        <image :src="imageUrl" mode="" @click="changeVisible"></image>
      </view>
    </view>
    <button v-if="account==''||password==''" class="btn1" @click="goLogin">登录</button>
    <button v-else class="btn2" @click="goLogin">登录</button>
  </view>
</template>

<script>
import loginVue from './login.vue';
export default {
  name: '',
  components: {},
  data() {
    return {
      account: 'hdsj001',
      password: 123456,
      token:uni.getStorageSync('myToken'),
      imageUrl:"../../static/眼睛_闭@2x.png",
    };
  },
  created() {},
  mounted() {},
  onLoad() {},
  methods: {
    changeVisible(){
      this.imageUrl="../../static/眼睛3@2x.png"
    },
    goLogin(){
    uni.request({
        method:'POST',
          url: 'http://god-express-gateway-t.itheima.net/driver/login/account', //仅为示例，并非真实接口地址。
          data: {
             account:this.account,
             password:this.password
          },
          success: (res) => {
              console.log(res.data);
              uni.setStorageSync('myToken',res.data.data)
              if(res.data.code===200){
                uni.switchTab({
                  url:'/pages/index/index'
                })
              }
          }
      });
      
    }
  },
 
 
};
</script>

<style lang="scss">
.head {
  display: flex;
  align-items: center;
  width: 309px;
  height: 50px;
  justify-content: space-between;
  margin: 50px auto;

  .left {
    color: left;
    font-weight: bold;
    font-size: 24px;
  }
  .right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text {
      color: #ef4f3f;
      font-size: 16px;
    }
    image {
      margin-left: 10px;
      width: 10px;
      height: 10px;
    }
  }
}
.body {
  width: 309px;
  margin: 50px auto;
  input {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f6f6f6;
  }
}
button {
  width: 309px;
  height: 50px;
  background-color: #f9dcd8;
  margin: 50px auto;
  border-radius: 22.77px;
  color: #fff;
}
.u-input--radius[data-v-113bc24f],
.u-input--square[data-v-113bc24f] {
  border: none;
}
.btn1 {
   background-color: #f9dcd8;
}
.btn2 {
   background-color: #ee4f3e;
}
.password {
  display: flex;
  justify-content: space-between;
  align-items: center;
  image {
    width: 16px;
    height: 16px;
  }
}
</style>
